<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div class="layui-card-header">区块链数据</div>
            <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                    <div carousel-item>
                        <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <i class="layui-icon layui-icon-component"></i> 共识算法: <span style="color: #009688"><b th:text="${session.alg}"></b></span>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <i class="layui-icon layui-icon-website"></i> 区块链类型: <span style="color: #009688"><b>联盟链</b></span>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <i class="layui-icon layui-icon-chart"></i>状态: <span style="color: #009688"><b><i class="layui-icon layui-icon-circle-dot" style="color: #5FB878"></i> 正常</b></span>

                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>节点数量</h4>
                                    <p><cite th:text="${statistic.totalNodeNum}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>区块数量</h4>
                                    <p><cite th:text="${statistic.blockNum}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>交易数量</h4>
                                    <p><cite th:text="${statistic.blockNum}"></cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">共识数据分析</div>
            <div class="layui-card-body">
                <div class="layui-carousel layadmin-carousel layadmin-backlog">
                    <div carousel-item>
                        <ul class="layui-row layui-col-space10">
                            <li class="layui-col-xs4">
                                <a id="successNode" class="layadmin-backlog-body">
                                    <h4>出块节点</h4>
                                    <p ><cite th:text="${statistic.successNodeNum}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a id="delegateNode" class="layadmin-backlog-body">
                                    <h4>见证人节点</h4>
                                    <p><cite th:text="${statistic.delegateNum}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a id="failNode" class="layadmin-backlog-body">
                                    <h4>作恶节点</h4>
                                    <p><cite th:text="${statistic.failNodeNum}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>区块验证时延</h4>
                                    <p><cite th:text="${#numbers.formatDecimal(statistic.avgTime,1,4)}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>恶意节点占比</h4>
                                    <p><cite th:text="${#numbers.formatDecimal(statistic.failRate,1,4)}"></cite></p>
                                </a>
                            </li>
                            <li class="layui-col-xs4">
                                <a href="#" class="layadmin-backlog-body">
                                    <h4>去中心化(基尼系数)</h4>
                                    <p><cite th:text="${#numbers.formatDecimal(statistic.giniIndex,1,4)}"></cite></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">区块信息</div>
            <div class="layui-card-body">
                <table id="block_info_table" lay-filter="block_info_table">

                </table>
            </div>
        </div>
    </div>
</div>
<script>
    function showStatus(data) {
        if (data.status === 0) {
            return '<button class="layui-btn layui-btn-sm layui-btn-danger">异常</button>';
        } else {
            return '<button class="layui-btn layui-btn-sm ">正常</button>';
        }
    }

    function showTokenFixed(data) {
        return data.token.toFixed(4);
    }
    function showCreditFixed(data) {
        return data.credit.toFixed(4);
    }
    function parseTimestamp(data){
        if(data.timestamp !== 0){
            return createTime(data.timestamp);
        } else {
            return '';
        }
    }

    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d+" "+h+":"+M;
        return str;
    }

    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','console','table','element','form','layer'],function () {
        var table = layui.table
            ,element = layui.element
            ,form = layui.form;
        var layer = layui.layer;

        $(document).on('click',"#successNode",function(){
            var url='/get_node_list?status='+1;
            top.layui.index.openTabsPage(url, "出块节点列表");
        });
        $(document).on('click',"#failNode",function(){
            var url='/get_node_list?status='+0;
            top.layui.index.openTabsPage(url, "出块节点列表");
        });
        $(document).on('click',"#delegateNode",function(){
            var url='/get_node_list?status=-1';
            top.layui.index.openTabsPage(url, "出块节点列表");
        });
        table.render({
            elem: '#block_info_table'
            ,url: '/get_block_info'
            ,method : 'post'
            ,toolbar: true
            ,defaultToolbar: ['filter', 'print']
            ,page: true
            ,cols: [
                [
                    {field: 'blockIndex', title: '区块ID', width: 80},
                    {field: 'previousHash', title: '前一区块哈希值'},
                    {field: 'timestamp', title: '出块时间', templet: parseTimestamp,width: 120},
                    {field: 'nodeIndex', title: '出块节点',width: 120},
                    {field: 'token', title:'出块节点奖励', templet: showTokenFixed,width: 120},
                    {field: 'credit', title:'出块节点信任度', templet: showCreditFixed,width: 150},
                    {field: 'status', title:'状态', templet: showStatus, width: 80}
                ]
            ]
        });


    });

</script>
</body>
</html>

